

import React, { Component } from 'react'


export default class index extends Component {

  constructor(){
    super();
    console.log("1-constructor");
    this.state = {
       count:5
    }
  }

  // 从react17开始，所有will开头的钩子函数，不建议使用了。除了：componentWillUnmount。

  componentWillMount(){
    console.log("2-componentWillMount");
  }

  componentDidMount(){
    console.log("4-componentDidMount");
    // 可以发送请求。
  }

  changeCount=()=>{
    this.setState({
      count:this.state.count+1
    })
  }

  shouldComponentUpdate(nextProps, nextState){
    console.log("shouldComponentUpdate");
    return true;
  }

  componentWillUpdate(){
    console.log("componentWillUpdate");
  }

  componentWillReceiveProps(){
    console.log("componentWillReceiveProps");
  }

  componentDidUpdate(){
    console.log("componentDidUpdate");
  }

  componentWillUnmount(){
    console.log("componentWillUnmount");
  }

  render() {
    console.log("3-render");
    return (
      <div>
        <h1>生命周期</h1>
        <p>count:{this.state.count}</p>
        <input type="button" value="修改count" onClick={this.changeCount} />
      </div>
    )
  }
}
